<template>
  <div class="home">
    <el-card shadow="never">
      <div id="div1">
        <el-row>
          <el-col :span="24"
            ><div id="div11" class="grid-content bg-purple-dark">
              <span>场馆列表</span>
            </div></el-col
          >
        </el-row>
      </div>
      
      <div class="zhuti">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item id="item1" label="场馆添加"> </el-form-item>

        <el-form-item label="场馆名称">
          <el-input v-model="form.name" placeholder="符号健身馆"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" placeholder="18000000000"></el-input>
        </el-form-item>

        <el-form-item label="地址">
          <el-input v-model="form.address" placeholder="省市区"></el-input>
        </el-form-item>
        <div id="div11">
          <img id="img1" src="../../assets/images/1.jpg" alt="" />
        </div>

        <el-form-item label="邮箱">
          <el-input v-model="form.email" placeholder="1222@163.com"></el-input>
        </el-form-item>

        <el-form-item label="排序">
          <el-input v-model="form.sort" placeholder="2"></el-input>
          <span>排序数字越大越靠前</span>
        </el-form-item>

        <el-form-item label="状态">
          <div class="xuanze">
            <el-radio v-model="form.status" label="1">正常</el-radio>
            <el-radio v-model="form.status" label="2">弃用</el-radio>
          </div>
        </el-form-item>

         <!-- 介绍，场馆介绍 -->
        <el-form-item label="介绍" class="introduce">
          <el-input v-model="form.description"
            :rows="10"
            class="venuedescript"
            type="textarea"
            placeholder="场馆介绍"
          ></el-input>
        </el-form-item>

        <!--图片部分  -->
        <div id="tupian">
          <el-upload 
          ref='upload' 
          action="/gym/uploadImage" 
          list-type="picture-card"
          :auto-upload="true" 
          :limit="1" 
          name="image"
          :on-success="upload"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span  class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </el-form>

      <!-- 下面那个板块 -->
      <div id="div5">
        <el-form :inline="true" :model="formInline" class="demo-form-inline demo-dynamic" ref="formInline" >
          <!-- 第一行 -->
          <el-row >
            <el-col :span="10"
              ><div class="grid-content bg-purple">
                <el-form-item  
                v-for="(formInline, index) in formInline.formInlines"  
                  label=名称    
                 :key="formInline.key"
                :prop="'formInlines.' + index + '.value'">
                  <el-input
                    v-model="formInline.name1"
                    placeholder="名称"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="10"
              ><div class="grid-content bg-purple-light">
                <el-form-item 
                v-for="(formInline, index) in formInline.formInlines"
                label=容纳人数   
                 :key="formInline.key"
                :prop="'formInlines.' + index + '.value'"
                >
                  <el-input
                    v-model="formInline.container1"
                    placeholder="容纳人数"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="4"
              >
            </el-col>
          </el-row>
          <!--第二行  -->
          <el-row>
            <el-col :span="10"
              ><div class="grid-content bg-purple">
                <el-form-item 
                 v-for="(formInline, index) in formInline.formInlines"
                label=名称  
                 :key="formInline.key"
                :prop="'formInlines.' + index + '.value'">
                  <el-input
                    v-model="formInline.name2"
                    placeholder="名称"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="10"
              ><div class="grid-content bg-purple-light">
                <el-form-item 
                 v-for="(formInline, index) in formInline.formInlines"
                label=容纳人数   
                 :key="formInline.key"
                :prop="'formInlines.' + index + '.value'">
                  <el-input
                    v-model="formInline.container2"
                    placeholder="容纳人数"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="4"
              >
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row >
            <el-col :span="10"
              ><div class="grid-content bg-purple">
                <el-form-item label="名称">
                  <el-input
                    v-model="formInline.name3"
                    placeholder="名称"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="10"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="容纳人数">
                  <el-input
                    v-model="formInline.container3"
                    placeholder="容纳人数"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="4"
              >
            </el-col>
          </el-row>
        </el-form>
        <el-row id="save">
          <el-button class="save" type="primary" @click="save">保存</el-button>
        </el-row>
      </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      image:"",
      dialogImageUrl: "", //照片那里
      dialogVisible: false,
      disabled: false,
      textarea: "",
      formInline: {
        //删除某一行要用的
         formInlines: [{
            name1: ''
          }],

        name1:'',
        container1:'',
        name2:'',
         container2:'',
         name3:'',
         container3:'',
      },
      radio: "1",
      form: {
        name: "",
        phone: "",
        email:"",
        sort: "",
        status: "",
        description: ""
      },
    };
  },
  methods: {
    upload(response, file, fileList){
        // console.log(response);
        this.image=response.data
    },
    onSubmit() {
      console.log("submit!");
    },
    // 照片那里的方法
    handleRemove(file) {
      console
      console.log(111,file)
      this.$refs.upload.clearFiles();
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      console.log(this.dialogImageUrl);
      console.log(this.dialogVisible);
    },
    handleDownload(file) {
      console.log(file);
    },

   //保存按钮，增加一个场地信息
     save(){
       this.$axios({
         url:'/gym/venue/addVenue',
         method:'post',
         data:{
          venues:[{name:this.form.name,
          phone:this.form.phone,
          address:this.form.address,
          email:this.form.email,
          sort:this.form.sort,
          image:this.image,
          status:this.form.status,
          description:this.form.description,
          },
            {capacity:this.formInline.container1,spaceName:this.formInline.name1},{capacity:this.formInline.container2,spaceName:this.formInline.name2},{capacity:this.formInline.container3,spaceName:this.formInline.name3}
          
          ]
          
         }
       }).then((res)=>{
         if(res.data.code==200){
          this.$message.success('添加成功')
         }
         else{
           this.$message.error('添加失败')
         }
       })
     }

  },
};
</script>
<style scoped>
.zhuti{
  margin-left: 200px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #606266;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.el-col #div11 {
  position: relative;
  height: 50px;
}

#div11 > span {
  display: block;
  position: absolute;
  float: left;
  margin-left: 20px;
  margin-top: 10px;
  font-weight: bold;
  font-size: 24px;
}

.el-form {
  margin-top: 20px;
}
#item1 {
  font-weight: bold;
}
#img1 {
  width: 600px;
  height: 200px;
  border-radius: 5%;
}
#div3 {
  width: 1000px;
  height: 200px;
}
.img2 {
  width: 200px;
  height: 100px;
  margin-right: 20px;
}
.el-form-item {
  margin-left: 50px;
  position: relative;
  margin-bottom: 20px;
}
.el-input {
  position: absolute;
  left: 20px;
  width: 300px;
}
.xuanze {
  position: absolute;
  left: 30px;
}
#scwj {
  float: left;
}
#scwj:after {
  content: "";
  display: block;
  clear: both;
}
#div11 {
  margin-bottom: 20px;
}
#item2 {
  margin-top: 20px;
  margin-bottom: 0;
}
#tupian {
  height: 150px;
  margin-left: 500px;
}
.shangchuan {
  text-align: left;
  width: 300px;
}

#tupian {
  margin-bottom: 50px;
}
.venuedescript {
  position: absolute;
  left: 20px;
  width: 500px;
}


#div4 {
  text-align: left;
  width: 500px;

  margin-left: 100px;
}
#div5 {
  margin-top: 20px;
  text-align: left;
}
#save {
  text-align: center;
}
.save{
 text-align: left;
}
</style>